<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>创客手机网站</title>
  <script src="/wap/js/flexible.js"></script>
  <script src="/wap/js/jquery-3.2.1.min.js"></script>
  <script src="/wap/js/util.js"></script>
  <link rel="stylesheet" href="/wap/css/style.css">
  <style>
    html {
      background: #f3f5f7;
    }
  </style>
</head>
<body>
<div id="addCard">
  <div id="formInput">
    <input type="hidden" name="_token" value="{{csrf_token()}}">
    <div class="input">
      <div class="input__left">请绑定持卡人本人的银行卡</div>
    </div>
    <div class="input">
      <div class="input__left">持卡人</div>
      <div class="input__right">
        <input type="text" id="card_owner" name="accountName" placeholder="请输入持卡人姓名" />
      </div>
    </div>
    <div class="input">
      <div class="input__left">银行名称</div>
      <div class="input__right" onclick="showList()">
        <input type="hidden" id="bankId" value="" name="accountBankId">
        <input type="text" id="bank_name" placeholder="请选择银行名称" disabled style="margin-right: 0.6rem" />
        <img src="/wap/image/arrow_down.png" class="arrow" style="right: 0;width: 0.3rem;height: auto;">
        <div class="input_select box-shadow-333" style="width: auto">
          <ul>
            @foreach($bankList as $v)
            <li data-value="{{ $v->id }}">{{ $v->bank_name }}</li>
            @endforeach
          </ul>
        </div>
      </div>
    </div>
    <div class="input">
      <div class="input__left">卡号</div>
      <div class="input__right">
        <input type="text" id="card_num" name="accountCode" placeholder="请输入银行卡号" />
      </div>
    </div>
    <div class="input">
      <div class="input__left">开户支行</div>
      <div class="input__right">
        <input type="text" id="bankBranchName" name="accountBranchName" placeholder="请输开户支行全称" />
      </div>
    </div>
    <div class="input">
      <div class="input__left">登陆密码</div>
      <div class="input__right">
        <input type="password" id="login_pwd" placeholder="请输入登陆密码"/>
      </div>
    </div>
    <div class="form__btn">绑定银行卡</div>
  </div>
</div>
</body>
</html>

<script>
    $(function(){
        $('.input').bind('input propertychange', function() {
            var isTrue = $('#card_owner').val()!='' &&  $('#bank_name').val()!='' &&  $('#card_num').val()!=''&&  $('#bankBranchName').val()!='' &&  $('#login_pwd').val()!=''?true:false;
            if(isTrue)
                $('.form__btn').addClass('bg-e60012');
            else
                $('.form__btn').removeClass('bg-e60012');
        });
        $('.form__btn').click(function() {
            var accountName = $('#card_owner').val();
            var accountBankId = $('#bankId').val();
            var accountCode = $('#card_num').val();
            var accountBranchName = $('#bankBranchName').val();
            var password = $('#login_pwd').val();
            var csrf_token = $('input[name="_token"]').val();
            var isTrue = accountName!='' &&  $('#bank_name').val()!='' &&  accountCode!=''&&  accountBranchName!='' &&  password!=''?true:false;
            if(!isTrue){
                toast('数据不完整');
                return false;
            }
            $.ajax({
                type: 'post',
                url: '{{ route('wap.index.addBankAccount') }}',
                data: {'accountName':accountName,'accountBankId':accountBankId,'accountCode':accountCode,'accountBranchName':accountBranchName,'password':password,'_token':csrf_token},
                dataType: "JSON",
                async: false,
                success: function (res) {
                    console.log(res);
                    if(res.status=='FAIL'){
                        toast(res.message,2000);
                    }else{
                        toast('绑定成功！',2000);
                        window.location.href = '/wap/index/bankAccountList/{{ $id }}';
                    }
                },
                error: function (res) {
                    console.log(res, 'error');
                }
            });
        });
        $('.input_select li').click(function(){
            $('#bankId').val($(this).data('value'));
            $('#bank_name').val($(this).html());
        })

    })
    function showList(){
        $('.input_select').toggle(500);
    }
</script>